<template>
	<view>
		<view class="searchPP">
			<image @click="goBackM" style="width: 0.6rem;height: 1rem;padding: 0rem 0.5rem 0rem 0rem;" src="../../style/image/cargo/leftarow.jpg"
			 alt="">
				<view class="searchP">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入您要搜索的商户名称或电话" shape="round" v-model="keyword" :show-action="false" @search="searchShop"></u-search>
					</view>
					<!-- <view @click="celendarM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
                </view> -->
				</view>
		</view>
		<u-empty style="margin-top: 3rem;" v-if="showDatasList.length==0 && !isLoading" text="暂无数据" mode="data"></u-empty>
		<u-swipe-action v-for="(item,index) in showDatasList" :key="index" @click="click" @open="open" :options="options"
		 :disabled=true>
			<view class="prolifyP" style="border-bottom: 1px solid #e8e8e8;">
				<view style="">
					<view style=" color:rgb(0, 0, 0);font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;margin-bottom: 0.1rem;">{{item.shopName}}</view>
					<view style="margin-left: 0px;font-weight: 300;font-family: PingFang SC;">{{item.phone}}</view>
				</view>
				<view @click="goCargoM(item)" class="cargoBtn">去铺货</view>
			</view>
		</u-swipe-action>




		<view class="footP">
			<view @click="addPosM" style="padding: 0.7rem;
display: flex;align-items: center;">
				<image style="width: 1rem;height:1rem" src="../../style/image/cargo/add.jpg" alt="">
					<view style="color: white;
margin-left: 0.2rem;">添加新商户</view>
			</view>

		</view>


	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findShopList
	} from "../../utils/uniApi";

	import {
		AppModule
	} from '../../store/modules/app'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public isLoading = false; //是否加载中
		public fatherPage = '' //父级页面入口
		public keyword = '' //搜索关键字
		public routerList = [] //父页面传递的的sn列表
		public fatherList = [] //父页面传递的的item列表
		public showDatasList: Array < object >= [] //数据源
		public options = [{
				text: '编辑',
				style: {
					backgroundColor: '#007aff'
				}
			},
			{
				text: '删除',
				style: {
					backgroundColor: '#dd524d'
				}
			}
		]

		created() {}

		onLoad(option: any) {
			if (option.snAndtype) {
				var dic = JSON.parse(option.snAndtype)
				this.routerList = dic.snlist
				this.fatherList = dic.list
				this.fatherPage = dic.type
			}
		}
		onHide() {
			uni.hideLoading();
		}

		mounted() {
			this.findShopList(this.keyword)
		}
		findShopList(key: any) {
			this.isLoading = true
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				shopName: key, //	商户名称搜索  可以选
				state: '', //yph 已铺货|wph 未铺货|dx 掉线|zx 在线
				orderBy: '' //	syDesc 收益倒序|syAsc 收益正序|timeDesc 创建时间倒序|timeAsc 创建时间正序
			}
			findShopList(params).then((res: any) => {
				this.isLoading = false
				uni.hideLoading();
				if (res.data.code == 200) {
					this.showDatasList = [];
					res.data.data.filter((item: any, index: any) => {
						this.showDatasList.push(item)
						console.log(this.showDatasList, 'this.showDatasList')
					})
				} else {
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			})
		}
		//搜索框
		searchShop(value: any) {
			this.keyword = value
			this.findShopList(this.keyword)
		}
		// 添加新商户
		addPosM() {
			uni.navigateTo({
				url: './cargoPos'
			});
		}

		open() {

		}
		click() {
		
		}

		goBackM() {
			uni.switchTab({
				url: './index'
			});
		}

		//铺货按钮  选择商户去铺货
		goCargoM(data: any) {
			var dic = {
				list: this.fatherList,
				snlist: this.routerList,
				shopId: data.id,
				type: this.fatherPage
			}
			uni.navigateTo({
				url: "./selectW?data=" + encodeURIComponent(JSON.stringify(dic)),
			});
		}

	}
</script>

<style lang="scss" scoped>
	.searchPP {
		background-color: white;
		padding: 0.5rem;

		display: flex;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.prolifyP {
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	/* 加上标签 或者加上>   */
	.agentprolify {
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.agentprolify :first-child {
		font-size: 0.72rem;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
	}

	.agentprolify> :nth-child(1) {}

	.agentprolify> :nth-child(2) {
		color: red;
	}

	.cargoBtn {
		background: #02AF74;
		border-radius: 0.2rem;
		padding: 0.2rem;
		color: white;
	}


	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
